/* Empty. Add your own CSS if you like */

html {
	font-size: 20px;
}
*{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
@media only screen and (min-width: 400px) {
	html {
		font-size: 21.33333333px !important;
	}
}

@media only screen and (min-width: 414px) {
	html {
		font-size: 22.08px !important;
	}
}

@media only screen and (min-width: 480px) {
	html {
		font-size: 25.6px !important;
	}
}

.list.play {
	margin: 5px 0;
	background: none;
	height: 100%;
}

.list.play a {
	background: none;
	border-top: none;
	color: #fff;
}

.list.play h2 {
	color: #fff;
}

.list.play a p {
	color: #eeeeee;
}

.playlist {
	background: url("../img/screen/1.jpg");
	bottom: 82px;
}
.playlist-bg {
	background: url("../img/screen/2.jpg");
}
.search-bg{
	background: url("../img/screen/2.jpg");
	height: 544px!important;
}
/*覆盖样式*/

.item-complex .item-content,
.item-radio .item-content {
	background: rgba(255, 255, 255, .3);
	-webkit-box-shadow: 3px 3px 5px 15px #000;
	box-shadow: 3px 3px 5px 15px #000;
}

.playlist .item {
	margin: 5px;
	background: none;
}

.play .item.activated.playitem{
	background: rgba(0,0,0,.3);
}
.playlist>* {
	background: none!important;
}

.playlist .item>a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column no-wrap;
	flex-flow: column no-wrap;
}

.playlist .item>a>div {
	-ms-flex-item-align: center;
	align-self: center;
}

.playlist .item .media {
	width: 64px;
}

.playlist .item .name {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	text-align: left;
	text-indent: 2rem;
}

.play .item img {
	width: 100%;
	border-radius: 50%;
}
.play .item{
	background: none;
	border: none;
	padding-top: .25rem;
	border-bottom: 1px solid #cdcdcd;
}

/*播放*/

.play.info {
	background: rgb(45, 82, 111);
	height: 83.3px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 100;
}


/*列表页播放控件*/

.play .info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row no-wrap;
	flex-flow: row no-wrap;
	height: 56px;
}

.play .info>div {
	width: 50%;
}

.play .info a.item {
	margin: 0;
	padding-top: 3px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	height: 100%;
	background: none;
	border: none;
}
.play .info .detail{
	display: block;
	position: absolute;
	left: 16px;
	top: 5px;
	width: 40px;
	height: 40px;
}
.play .info .item * {
	color: #fff;
}
.play .info .item h2{
	top: 5px;
}

.right-control {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.right-control span {
	width: 2rem;
	height: 2rem;
	background: red;
}

.content {
	position: absolute;
	top: 44px;
	bottom: 83.3px;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 7;
}

#prev {
	background: url(../img/Start-btn.png) left top no-repeat;
	background-size: 100%;
}

#play {
	width: 2.5rem;
	height: 2.5rem;
	background: url(../img/Pause-btn.png) left top no-repeat;
	background-size: 100%;
}
#next {
	background: url(../img/End-btn.png) left top no-repeat;
	background-size: 100%;
}

#mode.loop {
	background: url(../img/Shuffle-btn.png) left top no-repeat;
	background-size: 100%;
}
#mode.mode {
	background: url(../img/Sequential.png) left top no-repeat;
	background-size: 100%;
}
#mode.single {
	background: url(../img/Loop-btn.png) left top no-repeat;
	background-size: 100%;
}
#prev.activated,#play.activated,
#next.activated, #mode.activated{
	opacity: 0.3;
} 
#play.active{
	background: url(../img/Play-btn.png) left top no-repeat;
	background-size: 100%;
}
.item.range{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.outrange{
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background: #fff;
	height: 4px;
	margin:0 .5rem;
	position: relative;
}
.outrange .innerRange{
	position: absolute;
	left: 0%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: .8rem;
	height: .8rem;
	background: #007AFF;
	border-radius: 50%;
}
.outrange .innerLine{
	position: absolute;
	left: 0%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 10%;
	height: 4px;
	background: #007AFF;
}
.scroll-content{
	bottom: 4rem;
}

#search{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 2.25rem;
	background:rgba(255,255,255,.3);
	-webkit-box-shadow: 0 0 5px -2px rgba(255,255,255,.3);
	box-shadow: 0 0 5px -2px rgba(255,255,255,.3);
	overflow: hidden;
}
#keyWord{
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	line-height: 2.25rem;
	border: none;
	outline: none;
	height: 2.25rem;
	padding-left: .5rem;
	background: none!important;
	color: #131313;
	font-size: .8rem;
}

#submit{
	width: 4rem;
	line-height: 2.25rem;
	height: 2.25rem;
	background: rgba(0,0,0,0);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-size: .8rem;
	background: #007AFF;
}

/*歌词部分*/
#detailLrc{
	text-align: center;
	padding: .5rem;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#detailLrc .title{
	color: #fff;
	font-size: .8rem;
	margin-top: .5rem;
	overflow:hidden ;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#detailLrc .singer{
	color: #fff;
	font-size: .7rem;
	margin-top: .5rem;
}
#detailLrc .songPic{
	margin-top: .5rem;
	height: 7.2rem;
}
#detailLrc .songPic img{
	max-width: 40%;
	height: 100%;
}
#detailLrc .lrcBox{
	margin-top: 1rem;
	width: 100%;
	height: 12rem;
	overflow: hidden;
}
#detailLrc .lrcBox li{
	-webkit-transition: all .3s;
	transition: all .3s;
	color: #999;
	font-size: .65rem;
	line-height: 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#detailLrc .lrcBox li.active{
	color: #F1F2F3;
	font-size: .7rem;
}

.scroll{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
}
#detailLrc .scroll{
	overflow: hidden;
}
.search-box{
	position: absolute;
	right: 0;
	left: 0;
	top: 2.25rem;
	bottom: 0;
	overflow-y: auto;
}
.search-box h2 {
	margin-top: 1.2rem;
}
.search-box h2 b{
	color: #007AFF;
}
.myplayList{
	padding:.5rem;
}

.play .addPlay{
	position: absolute;
	right: .5rem;
	top: 50%;
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	border-radius: 50%;
	background: url(../img/add.png);
	background-size: 100% 100%;
}
.voiceCtrl{
	margin-top: .4rem;
}
.voiceCtrl .range input{
	height: 30px!important;
}

.voiceCtrl,.voiceCtrl .range{
	height: 1.3rem;
}
.ion-volume-low:before,.ion-volume-high:before{
	font-size: 1.5rem;
	color: #fff;
}
/*.login{
	position: absolute;
	top: 44px;
	z-index: 20000!important;
	height: 100px;
	background: #fff;
}*/
.login form{
	position: absolute;
	top: 2.25rem;
	left: 0;
	right: 0;
}
